<template>
    <div class="container">
        <!-- Quill Editor -->
        <QuillEditor toolbar="#my-toolbar" v-model:content="content" :options=options @focus="handleFocus"
            @blur="handleBlur" />

        <!-- Custom Toolbar -->
        <div id="my-toolbar" class="custom-toolbar">
            <div class="toolbar-left">
                <button class="ql-bold"></button>
                <button class="ql-italic"></button>
                <button class="ql-underline"></button>
                <button class="ql-code"></button>
                <button @click="handleEdit">Edit</button>

                <button @click="handleEdit">View</button>

            </div>
        </div>

        <!-- Debug: 显示内容 -->
        <div class="content-preview">
            {{ content }}
        </div>
    </div>
    {{ options }}
    <t-divider>自己实现</t-divider>
    <div class="edit">

        <RichTextEditor />
    </div>
    <t-divider>自己实现带接口</t-divider>
    <RichTextAPIEdit />
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
// import '@vueup/vue-quill/dist/vue-quill.bubble.css';
import RichTextEditor from '@/components/Edit/RichTextEditor.vue';
import RichTextAPIEdit from '@/components/Edit/RichTextAPIEdit.vue';
const content = ref('');


const options = reactive({
    theme: 'snow', placeholder: 'Compose an epic...', readOnly: false
});
// 发送按钮的处理函数（示例）
const handleSend = () => {
    console.log('发送内容:', content.value);
    // 可在此添加提交逻辑
};

const handleFocus = (e: Event) => {
    console.log('Editor获得焦点', e);
    // options.readOnly = false;
};

const handleBlur = (e: Event) => {
    console.log('Editor失去焦点', e);
    // options.readOnly = true;
};

const handleEdit = (e: Event) => {
    console.log('Edit按钮被点击', e);
    options.readOnly = !options.readOnly;
};
</script>

<style lang="scss" scoped>
.container {
    border-radius: 5px;
    padding: 10px;
    background-color: #fff;
    font-family: Arial, sans-serif;
}
</style>